<template>
	<view class="allboxisDetailbox">
		<view class="headerbox">
			<image class="logoImage" src="https://file.whshiyuan.cn:9000/toopu/compressed/1051736493290_compressed_img.png" mode=""></image>
			<view class="itemTitle">用户权益，面面俱到</view>
			<view class="itemContact">陪伴用户的每一天</view>
		</view>
		<view class="itemall">
			<view class="itemALbox" v-for="(item,index) in detailsData" :key="index">
				<view class="itemallBox">
					<image class="selectIcon" src="../../../static/backgroundImage/gouxuan.png.png" mode=""></image>
					<view class="wordbox">
						<view class="wordTitle">{{item.WordTitle}}</view>
						<view class="wordContact">{{item.contact}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue'
const detailsData = ref([
	{
		WordTitle:'交通服务',
		contact:'提供多种车型的自驾租车服务，让您的行程更加自由灵活'
	},
	{
		WordTitle:'旅游咨询',
		contact:'旨在帮助规划行程、了解目的地特色及文化背景、获取实用建议'
	},
	{
		WordTitle:'旅游定制线路服务',
		contact:'提供多种车型的自驾租车服务，让您的行程更加自由灵活'
	},
	{
		WordTitle:'旅游装备',
		contact:'为旅行者提供购买建议的专业服务，每位旅客根配备合适的装备享受安全舒适的旅程'
	},
	{
		WordTitle:'社区互动',
		contact:'旅行者分享经验、攻略和照片，互动交流，获取实用建议和灵感的平台'
	},
	{
		WordTitle:'紧急援助',
		contact:'协调当地医疗服务，提供急救指导，安排就医和药物配送'
	}
])	
</script>

<style scoped>
	.itemContact{
		margin-top: 0.5vh;
		font-size: 32rpx;
		color: #323232;
	}
	.wordbox{
		width: 85%;
	}
	.wordContact{
		line-height: 48rpx;
		font-size: 28rpx;
		color: #989898;
	}
	.wordTitle{
		font-weight: bold;
		font-size: 31rpx;
		color: #0d0d0d;
	}
	.selectIcon{
		
		width: 30px;
		height: 30px;
	}
	.allboxisDetailbox{
		margin-top: 3vh;
	}
	.itemTitle{
		font-size: 40rpx;
		font-weight: bold;
		margin: 0.5vh auto;
		
	}
	.itemALbox{
		margin-top: 1vh;
		margin-left: 3vw;
		width: 44vw;
	}
	.headerbox{
		display: flex;
		
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100vw;
	}
	.logoImage{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	.itemall{
		display: flex;
		margin: 1vh auto;
		width: 96vw;
		flex-wrap: wrap;
	}
	.itemallBox{
		display: flex;
		justify-content: center;
	}
</style>